<script setup lang="ts">
import { type DataTableRowKey, NButton, NDropdown } from 'naive-ui';
import { InventoryGoods } from '@/service/api/inventory';
import { useAuthStore } from '@/store/modules/auth';
import SvgIcon from '@/components/custom/svg-icon.vue';

interface Props {
  selectedKeys: DataTableRowKey[];
}

interface Emits {
  (e: 'add'): void;
  (e: 'batch-success'): void;
  (e: 'reset-column-widths'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const handleAdd = () => {
  emit('add');
};

const handleBatchDropdown = (key: string) => {
  handleBatchAction(key, props.selectedKeys);
};

const handleBatchAction = async (key: string, selectedRowKeys: (string | number)[]) => {
  if (selectedRowKeys.length === 0) {
    window.$message?.error('请选择商品套餐');
    return;
  }

  // 前端权限检查
  const authStore = useAuthStore();
  const rights = authStore.getInventoryRights();

  const selectedIds = selectedRowKeys as string[];

  // 参考原网页端，限制批量删除数量
  if (key === 'delete' && selectedIds.length > 20) {
    window.$message?.error('最多一次删除20个商品套餐');
    return;
  }

  switch (key) {
    case 'delete':
      if (!rights?.good?.remove) {
        window.$message?.error('暂无删除权限');
        return;
      }

      if (window.confirm(`确定删除选中的 ${selectedIds.length} 个商品套餐吗？`)) {
        // 显示loading提示
        const loadingMessage = window.$message?.loading(`正在批量删除 ${selectedIds.length} 个商品套餐...`, {
          duration: 0
        });

        const response = await InventoryGoods.batchDeleteGoodsZh(selectedIds);

        // 关闭loading提示
        loadingMessage?.destroy();

        if (response && !response.error) {
          window.$message?.success(`成功删除 ${selectedIds.length} 个商品套餐`);
          emit('batch-success');
        } else {
          window.$message?.error('删除失败');
        }
      }
      break;

    case 'sticker':
      if (!rights?.good?.modify) {
        window.$message?.error('暂无修改权限');
        return;
      }

      if (window.confirm(`确定置顶选中的 ${selectedIds.length} 个商品套餐吗？`)) {
        // 显示loading提示
        const loadingMessage = window.$message?.loading(`正在批量置顶 ${selectedIds.length} 个商品套餐...`, {
          duration: 0
        });

        const response = await InventoryGoods.stickerGoodZh(selectedIds);

        // 关闭loading提示
        loadingMessage?.destroy();

        if (response && !response.error) {
          window.$message?.success(`成功置顶 ${selectedIds.length} 个商品套餐`);
          emit('batch-success');
        } else {
          window.$message?.error('置顶失败');
        }
      }
      break;

    case 'edit':
      if (!rights?.good?.modify) {
        window.$message?.error('暂无修改权限');
        return;
      }
      window.$message?.info('批量编辑功能开发中...');
      break;
  }
};

const handleResetColumnWidths = () => {
  emit('reset-column-widths');
};

// 暴露给父组件调用的方法
defineExpose({
  handleBatchAction
});
</script>

<template>
  <div class="flex items-center gap-3">
    <NButton type="primary" @click="handleAdd">
      <SvgIcon icon="ant-design:plus-outlined" class="mr-1 h-14px w-14px" />
      添加商品套餐
    </NButton>

    <NDropdown
      :options="[
        { label: '批量删除', key: 'delete' },
        { label: '批量置顶', key: 'sticker' },
      ]"
      @select="(key: string) => handleBatchDropdown(key)"
    >
      <NButton>
        <SvgIcon icon="ant-design:setting-outlined" class="mr-1 h-14px w-14px" />
        批量操作
        <SvgIcon icon="ant-design:down-outlined" class="ml-1 h-12px w-12px" />
      </NButton>
    </NDropdown>

    <NButton @click="handleResetColumnWidths">
      <SvgIcon icon="ant-design:reload-outlined" class="mr-1 h-14px w-14px" />
      重置列宽
    </NButton>
  </div>
</template>

